.button {
    --button-border-size: 3px;
    --button-padding-y: .8rem;
    --button-padding-x: 2rem;
    border: 0;
    border-radius: 2rem;
    padding: calc(var(--button-padding-y) + var(--button-border-size)) calc(var(--button-padding-x) + var(--button-border-size));
    cursor: pointer;
    display: inline-block;
    outline: none !important;
    text-decoration: none;
    background: var(--primary-color);
    color: var(--surface-white);
    /*-webkit-transition: all 0.4s;
    -moz-transition: all 0.4s;
    -o-transition: all 0.4s;
    transition: all 0.4s;*/
    font-weight: bold;
    font-size: 1rem;
}

    .button:hover {
        color: var(--surface-white);
        text-decoration: none;
    }

.button-blue:hover {
    background: var(--primary-gradient);
    border-color: var(--primary-gradient);
    color: var(--surface-white);
}

/* SECONDARY */
.button-red {
    background: var(--secondary-color);
    border-color: var(--secondary-color);
    color: var(--surface-white);
}

    .button-red:hover {
        background: var(--secondary-gradient);
        border-color: var(--secondary-gradient);
        color: var(--surface-white);
    }

/* TERTIARY */
.button-green {
    background: var(--tertiary-color);
    border-color: var(--tertiary-color);
    color: var(--surface-white);
}

    .button-green:hover {
        background: var(--tertiary-gradient);
        border-color: var(--tertiary-gradient);
        color: var(--surface-white);
    }

/* WHITE */
.button-white {
    background: var(--surface-white);
    border-color: var(--surface-white);
    color: var(--surface-black);
}
    .button-white:hover {
        background: var(--surface-black);
        border-color: var(--surface-black);
        color: var(--surface-white);
    }


/* SHADOW */
.button-shadow {
    box-shadow: 0px 10px 15px 0px rgba(0,0,0,0.1);
}

/* OUTLINE  */
.button-outline {
    background: none;
    padding: var(--button-padding-y) var(--button-padding-x);
    border: 3px solid var(--primary-color);
    color: var(--primary-color);
}

    .button-outline:hover {
        background: var(--primary-color);
        border-color: var(--primary-color); 
        color: var(--surface-white);
    }

    /* OUTLINE WHITE */
    .button-outline.button-white {
        border-color: var(--surface-white);
        color: var(--surface-white);
    }

        .button-outline.button-white:hover {
            background: var(--surface-white);
            border-color: var(--surface-white);
            color: var(--surface-black);
        }

.button-white.button-hover-red:hover {
    border-color: var(--secondary-color);
    background: var(--secondary-color);
    color: var(--surface-white);
}

.button-lg {
    width: 100%;
    text-align: center;
}